<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>酷我音乐</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部 -->
   <header>
    <div class="left">
    </div>
    <a class="right"  href="#">下载APP</a>
   </header>
  <!-- 搜索 -->
  <div class="second">
    <div class="search">
      <span class="iconfont icon-sousuo"></span>
      <span>搜索你想听的歌曲</span>
    </div>
  </div>
  <!-- banner -->
   <div class="banner">
    <img class="picture" src="./assets/banner01.jpeg" alt="">
   </div>
  <!-- 排行榜 -->
   <div class="List">
    <!-- 标题 -->
     <div class="third">
        <div class="title">
          <h4>酷我排行榜</h4>
          <span class="more">
          <span class="text">更多</span>
          <span class="iconfont icon-right">
          </span>
          </span>
      </div>
      </div> 
    <!-- 内容 -->
    <div class="content">
        <ul>
          <!-- 第一个 -->
          <li>
            <div class="pic">
              <img src="./assets/icon_rank_hot.png" alt="">
            </div>
            <div class="txt">
              <a href="#" class="some">酷我热歌榜
                <span class="iconfont icon-right"></span>
              </a>
              <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
              <a href="#">2.就让这大雨全部落下 - 容祖儿</a>
              <a href="#">3.缺氧 - 轩姨 (相信光) </a>
            </div>
          </li>
          <!-- 第二个 -->
            <li>
              <div class="pic">
                <img src="./assets/icon_rank_new.png" alt="">
              </div>
              <div class="txt">
                <a href="#" class="some">酷我新歌榜
                  <span class="iconfont icon-right"></span>
                </a>
                <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                <a href="#">2.就让这大雨全部落下 - 容祖儿</a>
                <a href="#">3.缺氧 - 轩姨 (相信光) </a>
              </div>
            </li>
            <!-- 第三个 -->
              <li>
                <div class="pic">
                  <img src="./assets/icon_rank_rise.png" alt="">
                </div>
                <div class="txt">
                  <a href="#" class="some">酷我飙升榜
                    <span class="iconfont icon-right"></span>
                  </a>
                  <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                  <a href="#">2.就让这大雨全部落下 - 容祖儿</a>
                  <a href="#">3.缺氧 - 轩姨 (相信光) </a>
                </div>
              </li>
        </ul>
      </div>
    </div>
    <!-- 推荐歌单 -->
    <div class="like">
      <!--标题 -->
      <div class="like_title">
        <h4>推荐歌单</h4>
        <span class="title_more">
        <span class="more_text">更多</span>
        <span class="iconfont icon-right"></span>
        </span>
      </div>
      <!-- 内容 -->
      <div class="like_content">
      <!-- 上面区域 -->
      <div class="content_top">
        <!-- 上左 -->
        <div class="top_one">
          <div class="pc1">
            <img src="./assets/song01.jpeg" alt="">
            <div class="pc1_text">18.2W</div>
          </div>
          <div class="one_text">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
        </div>
        <!-- 上中 -->
        <div class="top_second">
          <div class="pc2">
            <img src="./assets/song02.jpeg" alt="">
            <div class="pc2_text">18.2W</div>
          </div>
        <div class="second_text">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
        </div>
        <!-- 上右边 -->
      <div class="top_third">
        <div class="pc3">
          <img src="./assets/song03.jpeg" alt="">
          <div class="pc3_text">18.2W</div>
        </div>
        <div class="third_text">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
      </div>
      </div>
      <!--下面区域 -->
    <div class="content_bottom">
      <!-- 上左 -->
      <div class="bottom_one">
        <div class="pc4">
          <img src="./assets/song02.jpeg" alt="">
          <div class="pc4_text">18.2W</div>
        </div>
        <div class="one_text">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
      </div>
      <!-- 上中 -->
    <div class="bottom_second">
      <div class="pc5">
        <img src="./assets/song03.jpeg" alt="">
        <div class="pc5_text">18.2W</div>
      </div>
      <div class="second_text">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
    </div>
      <!-- 上右边 -->
    <div class="bottom_third">
      <div class="pc6">
        <img src="./assets/song01.jpeg" alt="">
        <div class="pc6_text">18.2W</div>
      </div>
      <div class="third_text">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
    </div>
      </div>
    </div>
  </div>
  <!-- 安装，下载 -->
   <div class="download">
    <img src="./assets/logo.png" alt="">
    <p>安装酷我音乐 发现更多好音乐</p>
    <span class="iconfont icon-right"></span>
   </div>

</body>

</html>